<template>
  <div id="userLoginView">
    <div id="welcome">
      <h2>欢迎登录</h2>
      <br />
      <br />
    </div>
    <a-form
      style="max-width: 480px; margin: 0 auto"
      :model="form"
      @submit="handleSubmit"
      label-align="left"
      auto-label-width
    >
      <a-form-item field="userAccount" label="账号">
        <a-input v-model="form.userAccount" placeholder="请输入账号" />
      </a-form-item>
      <br />
      <a-form-item field="userPassword" label="密码" tooltip="密码不少于 8 位">
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码"
        />
      </a-form-item>
      <div class="buttonStyle">
        <a-form-item>
          <a-button
            type="primary"
            shape="round"
            size="large"
            html-type="submit"
            style="width: 120px; margin-top: 16px"
            >点击登录
          </a-button>
        </a-form-item>
        <a-form-item>
          <div>
            没有账号？点击注册
            <a-button
              type="secondary"
              html-type="submit"
              shape="round"
              size="large"
              style="width: 120px; color: dodgerblue"
              @click="register"
              >注册账号
            </a-button>
          </div>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { UserLoginRequest, UserControllerService } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

/**
 * 表单信息
 */
const form = reactive({
  userAccount: "",
  userPassword: "",
} as UserLoginRequest);

//跳转注册页面
const register = () => {
  router.push({
    path: "/user/register",
    replace: true,
  });
};

const router = useRouter();
const store = useStore();
/**
 * 提交表单数据，实现登录
 * @param data
 */
const handleSubmit = async () => {
  // eslint-disable-next-line no-undef
  const res = await UserControllerService.userLoginUsingPost(form);
  //登录成功，跳转到主页
  if (res.code === 0) {
    await store.dispatch("user/getLoginUser");
    router.push({
      path: "/",
      replace: true,
    });
  } else {
    message.error("登录失败，" + res.message);
  }
};
</script>
<style scoped>
.buttonStyle {
  display: flex;
  margin-left: 35px;
  margin-top: 35px;
}

#userLoginView {
  border: solid 2px #dddddd;
  border-radius: 4%;
  width: 500px;
  height: 380px;
  background: transparent;
  margin: 0 auto; /*水平居中*/
  margin-top: 20px;
}

#welcome {
  margin-top: 40px;
  margin-left: 30px;
}
</style>
